<template>
  <div class="container-submitOrder">

    <itemSlotCard title="收货信息" icon="地址">
      <div v-if="info_address===null" class="add-address" @click="routerLink(`addAddress`)">＋新增收货地址</div>
      <itemInfoAddress v-else :show-btn="true" :value="info_address" />
    </itemSlotCard>

    <itemSlotCard title="订单信息" icon="订单">
      <itemListProduct v-for="(temp, index) in submitData.goods_info" :key="index" :value="temp" />
      <itemInfoOrder :value="submitData" />
    </itemSlotCard>

    <itemSlotCard :show-title="false">
      <van-field v-model="submitData.remark" label="留言" placeholder="请输入备注信息" />
    </itemSlotCard>

    <van-submit-bar :price="miva_price" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
// api
import {
  userAddressDetails,
  userOrderFreight,
  userOrderCreate
} from '@/api/miva'
// vuex
import { mapGetters } from 'vuex'
// item
import itemSlotCard from '@/components/miva-item/item-slot-card'
import itemListProduct from '@/components/miva-item/item-list-product'
import itemInfoOrder from '@/components/miva-item/item-info-order'
import itemInfoAddress from '@/components/miva-item/item-info-address'
// vant
import { Toast } from 'vant'
export default {
  components: {
    itemSlotCard,
    itemListProduct,
    itemInfoOrder,
    itemInfoAddress
  },
  data() {
    return {
      info_address: {},
      submitData: {
        address_id: 0, // 地址ID
        goods_total: 0, // 商品总价
        freight: 0, // 运费
        remark: '', // 备注
        goods_info: []
      }
    }
  },
  computed: {
    ...mapGetters(['order']),
    // 合计价格
    miva_price() {
      const { goods_total, freight } = this.submitData
      return (Number(goods_total) + Number(freight)) * 100
    },
    // 重新整理订单信息
    miva_goods() {
      const array = []
      for (const val of this.submitData.goods_info) {
        array.push({
          goods_id: val.product_id || val.goods_id,
          options_id: val.specification_id || val.options_id,
          num: val.num || 1
        })
      }
      return array
    }
  },
  async mounted() {
    // 获取订单信息
    if (!(await this.getOrder())) {
      return console.log('没有订单信息!')
    }
    // 获取单条用户收货信息
    await this.getUserAddressDetails()
    // 获取邮费
    await this.getOrderFreight()
  },
  methods: {
    // 提交订单
    async onSubmit() {
      // 重组订单信息
      const data = { ...this.submitData, goods_info: this.miva_goods }
      const res_order = await userOrderCreate({ data })
      await this.$store.dispatch('miva/clearOrder')
      Toast(res_order.msg)
      this.routerLink(`allOrder`, 1)
    },
    // 获取订单信息
    async getOrder() {
      if (this.order === null) {
        this.$router.back()
        return false
      }
      this.submitData.goods_total = this.order.goods_total
      this.submitData.goods_info = this.order.goods_info
      return true
    },
    // 获取单条用户收货信息
    async getUserAddressDetails() {
      const { data = {}} = (await userAddressDetails()) || {}
      this.info_address = data
      // submitData中装入地址的id
      this.submitData.address_id = data.id
    },
    // 获取邮费
    async getOrderFreight() {
      const { data } = await userOrderFreight({ data: this.miva_goods })
      this.submitData.freight = data
    },
    // 路由跳转
    routerLink(name, nowPage) {
      this.$router.push({ name, params: { nowPage }})
    }
  }
}
</script>

<style lang="less">
.container-submitOrder {
  padding: 10px;
  padding-bottom: 50px;
  background: #f5f6f8;
  .list {
    width: 100%;
    background: #fff;
    padding: 5px 0;
    border-radius: 6px;
    margin-bottom: 10px;
    .pic {
      width: 80px;
      height: 80px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .orderList {
      width: 100%;
      .state {
        border-bottom: 1px solid;
        text-align: right;
        color: #d63a54;
        padding: 2px 5px;
      }
    }
    .weight {
      color: #999999;
      font-size: 14px;
      padding-top: 5px;
    }
    .num {
      text-align: right;
      padding-top: 40px;
    }
    .all {
      // margin-top: 3px;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #e5e5e5;
      padding: 10px;
    }
  }
  .total {
    // padding: 10px 0;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .cost {
      text-align: right;
      display: block;
    }
    .cancel-btn {
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #999;
      text-align: center;
      font-size: 12px;
      color: #999;
    }
    .ok-btn {
      padding: 5px 15px;
      box-sizing: border-box;
      border: 1px solid #d63a54;
      text-align: center;
      font-size: 12px;
      color: #d63a54;
    }
  }
  .serveBtn {
    width: 100%;
    margin: 0 auto 10px;
    padding: 10px 0;
    text-align: center;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      padding-left: 5px;
      font-size: 16px;
    }
  }
  .van-button--danger {
    color: #fff;
    background-color: #d63a54;
    border: 1px solid #d63a54;
  }
  .van-submit-bar__price {
    color: #d63a54;
    font-size: 14px;
  }
  .add-address {
    width: 90%;
    margin: 20px auto;
    border: 1px solid;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background: #d63a54;
  }
}
</style>
